<template>
	<view class='login'>
		<view class='login__logo u-flex-cc'>
			<u-image class='u-mt-50' width="200rpx" height="200rpx" shape="circle" src="/static/logo.png"></u-image>
		</view>
		
		<view class='u-p-25 u-mt-20'>
			<u-form :model="form" ref="uForm" class='u-px-10 u-radius-8'>
				<u-form-item label-width='130' label="账号" prop="phone">
					<u-input v-model="form.phone" type="number" placeholder="请输入账号"/>
				</u-form-item>
				<u-form-item label-width='130' label="密码" prop="password">
					<u-input v-model="form.password" type='password' placeholder="请输入密码" />
				</u-form-item>
				<u-form-item label-width='130' label="确认密码" prop="confirmPsw">
					<u-input v-model="form.confirmPsw" type='password' placeholder="请再次输入密码" />
				</u-form-item>	
				<u-form-item label-width='130' label="验证码" prop="code">
					<view class='u-flex-bc u-flex-1'>
						<u-input v-model="form.code" type='number' placeholder="请输入验证码"/>
						
						<u-verification-code ref="uCode" keep-running @change="codeChange"></u-verification-code>
						<u-button @tap="getCode" size="mini">{{tips}}</u-button>
					</view>
				</u-form-item>
			</u-form>
			<view class='u-tr'>
				<navigator class='u-tr theme u-mt-20 f12 u-inline-block' url='/pages/login/login'>已有账号？去登录</navigator>
			</view>
			<view class='u-mt-20'>
				<u-button @click="submit" type="primary" class='f14'>提交</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	const rules = require('utils/rules.js')
	export default {
		data() {
			return {
				tips: '',
				form: { phone: '18898691768', password: '', confirmPsw: '', code: '' },
				rules: {
					// 手机号码
					phone: [{
							required: true, 
							message: '请输入账号', 
							trigger: ['blur'],
						},{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['blur'],
						}
					],
					// 验证密码
					confirmPsw: [{
						required: true, 
						message: '请再次输入密码', 
						trigger: ['blur']
					},{
						validator: (rule, value, callback) => {
							return value === this.form.password
						},
						message: '两次输入密码不一致',
						trigger: ['blur'],
					}],
				}
			};
		},
		methods:{
			// 提交表单
			async submit() {
				this.$refs.uForm.validate(async valid => {
					if (valid) {
						
						const res = await this.$http.post('register', this.form)
						
						if(res) {
							uni.redirectTo({
								url: '/pages/login/login',
								animationType: 'slide-in-right',
							})
						}
					} else {
						console.log('验证失败');
					}
				});
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if(this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules({ ...rules.rules, ...this.rules });
		}
	}
</script>

<style lang="scss">
.login {
	
}
</style>
